<template>
  <div>
    <!-- 日期选择框 -->
    <div class="time">
      <el-select v-model="year" style="margin-right:10px;width:15%" placeholder="请选择" @change="change">
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="month" style="width:10%" placeholder="请选择" @change="change">
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
    <!-- 日历 -->
    <el-calendar v-model="value">
      <template #dateCell="{date}">
        {{ getDay(date) }}
        <span v-if="isWeek(date)">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      value: new Date(),
      options: [],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1
    }
  },
  computed: {
  },
  created() {
    var arr = Array.from(Array(11))
    arr.forEach((item, index) => {
      arr[index] = 2022 + index - 5
    })
    this.options = arr
  },
  methods: {
    getDay(time) {
    //   console.log(time)
      var t = new Date(time)
      var day = t.getDate()
      return day
    },
    isWeek(time) {
      var t = new Date(time)
      var week = t.getDay()
      //   console.log(week, 700)
      if (week == 0 || week == 6) {
        return true
      } else {
        return false
      }
    },
    change() {
      this.value = new Date(`${this.year}-${this.month}`)
    }
  }
}
</script>
<style lang='scss'  scoped>
::v-deep .el-calendar__header {
    display: none;
}
span {
    background-color:#fa7c4d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-left: 25px;
    margin-top: -20px;
    font-size: 10px;
    border-radius: 50%;
    color: #fff;
}
.time {
    display: flex;
    justify-content: end;
}
</style>
